<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="base.css" />
    <meta name="author" content="林镭特" />
    <title></title>

    <style>
      main {
        width: 594px;
        border: 1px solid #e9e9e9;
        margin: 0 auto;
      }
      header {
        background: url("img/btn_cartoon.gif") no-repeat 0 0;
        width: 594px;
        height: 35px;
        position: relative;
      }
      h3 {
        background: url("img/btn_cartoon.gif") no-repeat 0 -100px;
        width: 84px;
        height: 35px;
      }
      header ul {
        display: flex;
        position: absolute;
        top: 15px;
        left: 100px;
      }
      header li {
        background: url("img/btn_cartoon.gif") no-repeat 0 -320px;
        width: 7px;
        height: 7px;
        margin-left: 5px;
        cursor: pointer;
      }
      .btn {
        position: absolute;
        top: 5px;
        left: 170px;
      }
      .btn-left {
        background: url("img/btn_cartoon.gif") no-repeat -3px -504px;
        width: 30px;
        height: 23px;
        float: left;
      }
      .btn-right {
        background: url("img/btn_cartoon.gif") no-repeat -30px -504px;
        width: 30px;
        height: 23px;
        float: left;
      }
      .btn-left:hover {
        background: url("img/btn_cartoon.gif") no-repeat -3px -404px;
        width: 30px;
        height: 23px;
      }
      .btn-right:hover {
        background: url("img/btn_cartoon.gif") no-repeat -30px -404px;
        width: 30px;
        height: 23px;
      }
      header ul li.current {
        background: url("img/btn_cartoon.gif") no-repeat 0 -220px;
        width: 7px;
        height: 7px;
      }
      header span {
        position: absolute;
        right: 0;
        top: 8px;
        color: cornflowerblue;
        cursor: pointer;
      }
      header span:hover {
        color: red;
      }
      section {
        /* width: 594px; */
		height: 200px;
		overflow: hidden;
      }
      section ul{
		  display: flex;
		  margin-top: 20px;
		  width: calc(590px*4);
		  position: relative;
		  transition: all 1s;
	  }
      section li {
	   display: flex;
	   width: 594px;
      }
      /*  */
      .title {
        font-size: 14px;
        color: cornflowerblue;
      }
      .play {
        font-size: 13px;
        color: #c3c8bb;
      }
      .title:hover {
        color: red;
        text-decoration: underline;
	  }
	  section li div{
		  margin-left: 19px;
	  }
    </style>
  </head>
  <body>
    <main>
      <header>
        <h3></h3>
        <ul>
          <li class="current"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="btn">
          <button class="btn-left"></button>
          <button class="btn-right"></button>
        </div>
        <span>更多>></span>
      </header>
      <section>
        <ul class="">
          <li>
            <div>
              <img src="img/01.jpg" alt="" />
              <p class="title">海贼王</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/01.jpg" alt="" />
              <p class="title">海贼王</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/01.jpg" alt="" />
              <p class="title">海贼王</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/01.jpg" alt="" />
              <p class="title">海贼王</p>
              <p class="play">播放：28,276</p>
            </div>
          </li>
          <li>
            <div>
              <img src="img/02.jpg" alt="" />
              <p class="title">多啦A梦</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/02.jpg" alt="" />
              <p class="title">多啦A梦</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/02.jpg" alt="" />
              <p class="title">多啦A梦</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/02.jpg" alt="" />
              <p class="title">多啦A梦</p>
              <p class="play">播放：28,276</p>
            </div>
          </li>
          <li>
            <div>
              <img src="img/03.jpg" alt="" />
              <p class="title">火影忍者</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/03.jpg" alt="" />
              <p class="title">火影忍者</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/03.jpg" alt="" />
              <p class="title">火影忍者</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/03.jpg" alt="" />
              <p class="title">火影忍者</p>
              <p class="play">播放：28,276</p>
            </div>
          </li>
          <li>
            <div>
              <img src="img/04.jpg" alt="" />
              <p class="title">龙珠</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/04.jpg" alt="" />
              <p class="title">龙珠</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/04.jpg" alt="" />
              <p class="title">龙珠</p>
              <p class="play">播放：28,276</p>
            </div>
            <div>
              <img src="img/04.jpg" alt="" />
              <p class="title">龙珠</p>
              <p class="play">播放：28,276</p>
            </div>
          </li>
        </ul>
      </section>
    </main>
    <script>
      var lis = document.querySelectorAll("header ul li");
      var imgs = document.querySelectorAll("section li");
      var btnleft = document.querySelector(".btn-left");
      var btnright = document.querySelector(".btn-right");
	  var main = document.querySelector("main");
	  var list=document.querySelector('section ul');
      var index = 0;
      var lastindex = index;

      btnleft.onclick = function() {
        previmg();
      };
      btnright.onclick = function() {
        nextimg();
      };

      function nextimg() {
        index = index == imgs.length - 1 ? 0 : index + 1;
        showimg();
      }
      function previmg() {
        index = index == 0 ? imgs.length - 1 : index - 1;
        showimg();
      }
      function showimg() {
		lis[lastindex].className=''
		list.style.left= -imgs[0].offsetWidth*index+'px'
		lis[index].className='current';
		lastindex=index
      }

      var timer = setInterval(nextimg, 3000);
      main.onmouseenter = function() {
        clearInterval(timer);
      };
      main.onmouseleave = function() {
        timer = setInterval(nextimg, 3000);
      };

      for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
          index = this.index;
          showimg();
        };
      }
    </script>
  </body>
</html>
